<template>
  <div>
    <base-header type="gradient-success" class="pb-6 pb-8 pt-5 pt-md-7"></base-header>
    <notifications></notifications>
    <div class="container-fluid mt--7">
      <div class="card shadow">
        <card type="frame">主题活动</card>
        <div class="card-header border-0">
          <div>
            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >活动标题</label>
              <div class="col-md-10">
                <base-input placeholder="请输入标题" v-model="model.title"></base-input>
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >活动类型</label>
              <div class="col-md-10">
                <base-radio name="articlelangdu" class="mb-3" v-model="model.type">文章朗读</base-radio>
                <base-radio name="langdumatch" class="mb-3" v-model="model.type">诗词比赛</base-radio>
                <base-radio name="customer" class="mb-3" v-model="model.type">自定义页面跳转</base-radio>
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >活动图片预览</label>
              <div class="col-md-10">
                <img style="width:400px" v-bind:src="model.mainimg" />
              </div>
            </div>

            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >活动图片上传</label>
              <div class="col-md-10">
                <vue-file-upload
                  ref="vueFileUploader"
                  :url="uploadUrl"
                  class="fileupload-button"
                  :auto-upload="true"
                  :events="cbEvents"
                  :filters="filters"
                  :request-options="reqopts"
                  @onAdd="onAddItem"
                />
              </div>
            </div>

            <!-- <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >活动图文详情</label>
              <div class="col-md-10">
                <client-only>
                  <quill-editor
                    ref="editor"
                    v-model="model.detail"
                    :options="quillOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @ready="onEditorReady($event)"
                  />
                </client-only>
              </div>
            </div> -->

             <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >活动介绍</label>
              <div class="col-md-10">
                <textarea class="form-control" rows="3" v-model="model.detail"></textarea>
              </div>
            </div>


            <div class="form-group row">
              <label
                for="example-search-input"
                class="col-md-2 col-form-label form-control-label"
              >活动状态</label>
              <div class="col-md-10">
                <base-radio name="0" class="mb-3" v-model="model.finish">未开始</base-radio>
                <base-radio name="2" class="mb-3" v-model="model.finish">进行中</base-radio>
                <base-radio name="1" class="mb-3" v-model="model.finish">已结束</base-radio>
              </div>
            </div>

            <div class="form-group row" v-show="showSaveBtn">
              <label for="example-time-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-10">
                <base-button type="success" @click="save()">
                  <i class="ni ni-send"></i>提交
                </base-button>
              </div>
            </div>
            <div class="form-group row" v-show="showUpdateBtn">
              <label for="example-time-input" class="col-md-2 col-form-label form-control-label"></label>
              <div class="col-md-10">
                <base-button type="success" @click="update()">
                  <i class="ni ni-send"></i>更新
                </base-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueFileUpload from "vue-file-upload";
// import quillConfig from "~/plugins/quill-config";
import validate from "~/config/utils/validate";
import {
  saveLdActivityApi,
  findLdActivityByIdApi,
  updateLdActivityApi,
} from "~/config/api/ldactivityinfoservice";
import config from "@/config";
export default {
  asyncData() {},
  components: {
    VueFileUpload,
  },
  head: {
    title: "添加活动",
  },
  name: "tables",
  data() {
    return {
      showSaveBtn: false,
      showUpdateBtn: false,
      uploadUrl: config.UPLOAD_ACTIVITY_IMG_URL,
      model: {
        id: "",
        title: "",
        detail: "",
        endtime: "",
        begintime: "",
        rpydarticledid: "",
        mainimg: "",
        type: "articlelangdu",
        finish: 0,
      },
      files: [], // 图片文件集合
      filters: [
        {
          name: "imageFilter",
          fn(file) {
            var type =
              "|" + file.type.slice(file.type.lastIndexOf("/") + 1) + "|";
            return "|jpg|png|jpeg|bmp|gif|".indexOf(type) !== -1;
          },
        },
      ],
      cbEvents: {
        onCompleteUpload: (file, response, status, header) => {
          this.model.mainimg = response.fileUrl;
        },
        onAddFileSuccess: (file) => {},
        onProgressUpload: (file, progress) => {},
      },
    };
  },
  created: function () {
    let pageaction = this.$route.query.action;
    if (pageaction == "save") {
      this.showSaveBtn = true;
    }
    if (pageaction == "edit") {
      this.showUpdateBtn = true;
      let id = this.$route.query.id;
      this.findById(id);
    }
  },
  mounted: function () {
    this.$refs.vueFileUploader.setFormDataItem("authorization", "");
  },
  methods: {
    onStatus(file) {
      if (file.isSuccess) {
        return "上传成功";
      } else if (file.isError) {
        return "上传失败";
      } else if (file.isUploading) {
        return "正在上传";
      } else {
        return "待上传";
      }
    },
    onPreview(file) {
      if ("URL" in window) {
        var src = window.URL.createObjectURL(file.file);
        return src;
      }
    },
    onAddItem(files) {
      this.files = files;
    },
    async findById(id) {
      let params = {
        id: id,
      };
      await findLdActivityByIdApi(params).then((res) => {
        if (res.sucflag) {
          this.model.title = res.bean.title;
          this.model.detail = res.bean.detail;
          this.model.type = res.bean.type;
          this.model.finish = res.bean.finish;
          this.model.mainimg = res.bean.mainimg;
          this.model.id = res.bean.id;
        }
      });
    },

    async save() {
      let params = {
        title: this.model.title,
        type: this.model.type,
        finish: this.model.finish,
        mainimg: this.model.mainimg,
        detail: this.model.detail
      };
      await saveLdActivityApi(params).then((res) => {
        if (res.sucflag) {
          this.$notify({
            type: "info",
            verticalAlign: "top",
            horizontalAlign: "center",
            message: "添加成功",
          });
          this.$router.push("/ldactivity/ldactivitylist");
        }
      });
    },
    async update() {
      let params = {
        id: this.model.id,
        title: this.model.title,
        type: this.model.type,
        finish: this.model.finish,
        mainimg: this.model.mainimg,
        detail: this.model.detail,
      };
      await updateLdActivityApi(params).then((res) => {
        if (res.sucflag) {
          this.$router.push("/ldactivity/ldactivitylist");
        }
      });
    },
  },
  layout: "DashboardLayout",
};
</script>
<style></style>
